<template>
  <div class="vue-box">
    <div class="c-panel">
		<el-row>
			<el-col :span="24" :xs="24">
				<!--模糊查询-->
				<el-form :inline="true" size="small">
					<el-form-item label="用户类型：">
						<el-select v-model="query.userType" clearable placeholder="请选择角色" @visible-change="getAllRole()" @change="setUserRole($event)" size="medium">
                            <el-option v-for="item in roleOptions" :key="item.id"
                            :label="item.roleName" :value="item.roleName">
                            </el-option>
                        </el-select>
					</el-form-item>
					<el-form-item label="用户名：">
						<el-input type="text" size="small" v-model="query.username" placeholder="模糊查询"></el-input>
					</el-form-item>
					<el-form-item label="IP地址：">
						<el-input type="text" size="small" v-model="query.ip" placeholder="模糊查询"></el-input>
					</el-form-item>
					<br/>
					<el-form-item label="创建时间：">
						<el-date-picker type="date" size="small" v-model="query.startTime" value-format="yyyy-MM-dd" placeholder="开始日期"></el-date-picker> - 
						<el-date-picker type="date" size="small" v-model="query.endTime" value-format="yyyy-MM-dd" placeholder="结束日期"></el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="f5()">查询</el-button>
					</el-form-item>

				</el-form>
				<!--全局功能按钮-->
				<el-row :span="24">
					<el-col :span="1.5" class="firstBtn">
						<el-button type="info" plain size="small" icon="el-icon-refresh" @click="query.pageNo = 1; f5('')">重置</el-button>
					</el-col>
					<el-col :span="1.5" class="btn">
						<el-button type="warning" plain size="small" icon="el-icon-download" @click="exportExcel()">导出</el-button>
					</el-col>
					<div style="text-align:right;margin-right:5px">
						<span class="span-box">
							<el-tooltip style="diaplay:inline" effect="dark" content="状态标签快速选择，只会对状态进行筛选" placement="top">
								<i class="el-icon-question" />
							</el-tooltip>
						</span>
						<el-radio-group v-model="codeRadio" size="small" @input="codeSelect">
							<!--不想给定默认值，但是不给报错，就整个不展示的选项-->
							<el-radio-button v-if="false" label=""></el-radio-button>
							<el-radio-button label="200">200(成功</el-radio-button>
							<el-radio-button label="500">500(错误</el-radio-button>
							<el-radio-button label="401">401(无权限</el-radio-button>
						</el-radio-group>
					</div>
				</el-row>
				<!--数据列表-->
				<el-table :data="tableData" ref="multipleTable" style="width: 100%" v-loading="state.loading" size="medium">
					<el-table-column label="编号" type="index" width="80"></el-table-column>
					<el-table-column label="用户类型"  prop="userType" width="120">
						<template slot-scope="scope">
							<el-tag
							disable-transitions>{{scope.row.userType}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="用户名"  prop="username" width="120"></el-table-column>
					<el-table-column label="日志内容"  prop="description" width="180"></el-table-column>
					<el-table-column label="IP地址"  prop="ip" width="160"></el-table-column>
					<el-table-column label="日志类别"  prop="logType" width="150">
						<template slot-scope="scope">
							<el-tag
							disable-transitions>{{scope.row.logType}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="请求状态"  prop="resultCode" width="120">
						<template slot-scope="scope">
							<el-tag effect="dark"
							:type="scope.row.resultCode === '200' ? 'success' : 'danger'"
							disable-transitions>{{scope.row.resultCode}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="创建日期"  prop="createTime" width="180"></el-table-column>
					<el-table-column label="操作" align="center">
						<template slot-scope="s">
								<el-button type="primary" size="mini" @click="state.getDialogVisible=true,get(s.row)">
								<i class="el-icon-view el-icon--left"></i>详情</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!--对话框相关-->
				<el-dialog title="删除提示" :visible.sync="state.delDialogVisible" :modal-append-to-body='false' 
				width="30%" :before-close="handleClose">
						<span >确定删除选择的访问记录？</span>
						<span slot="footer" class="dialog-footer">
						<el-button type="primary" @click="del()">确 定</el-button>
						<el-button @click="state.delDialogVisible=false">取 消</el-button>
						</span>
				</el-dialog>
				<el-dialog title="日志详情" :visible.sync="state.getDialogVisible" width="30%" :modal-append-to-body='false'  :before-close="handleClose">
					<json-viewer :value="logInfo" :expand-depth="5" copyable boxed sort @copied="onCopy"></json-viewer>
				</el-dialog>
				<!-- 分页 -->
				<div class="page-box">
					<el-pagination background
						layout="total, prev, pager, next, sizes, jumper" 
						:current-page.sync="query.pageNo" 
						:page-size.sync="query.pageSize" 
						:total="dataCount" 
						:page-sizes="[1, 5, 10, 20, 30, 100]" 
						@current-change="f5()" 
						@size-change="f5()">
					</el-pagination>
				</div>
			</el-col>
		</el-row>
	</div>
  </div>
</template>

<script>
//App.vue
import 'vue-json-viewer/style.css';
  export default {
    data() {
      return {
		    //查询参数
        query:{
          ip:'',
		      username:'',
		      userType:'',
          startTime: '',
		      endTime: '',
          pageNo:1,
          pageSize:10
        },
        //列表数据
        tableData: [],
        roleOptions:[],//角色列表（模糊查询用
        logInfo:'',
        codeRadio:'',
        info:'',//当前操作数据
        dataCount:0,//数据总数
        state:{
          loading:false,
          delDialogVisible:false,
          getDialogVisible:false
        }
      }
    },
    methods: {
		//列表刷新
		f5(param){
			this.state.loading=true;
			let params=param===undefined?this.query:param;
			console.log(params);
			this.request('/api/log/list',params).then(res=>{
			  if(!res){return}
        this.dataCount=res.data.total
        let tData=res.data.records
        for (let index = 0; index < tData.length; index++) {
          const element = tData[index];
          element.logType=element.logType=='0'?'系统日志':'登录日志'
        }
        this.tableData=res.data.records
        if(params==''){
          this.query={pageNo:1,pageSize:10}
          this.codeRadio=''
        }
        this.state.loading=false;
			})
		},
		//日志详情
		get(row){
			//console.log(row);
			let logJson=JSON.stringify(row)
			this.logInfo=JSON.parse(logJson)
		},
		//详情json复制监听
		onCopy(){
			this.$message.success("您已成功复制该json")
		},
		//城市标签筛选
		codeSelect(){
			console.log(this.codeRadio);
			let params={resultCode:this.codeRadio};
			this.f5(params)
		},
		//导出excel
		exportExcel(){
			if(!this.zm.checkAuth('log:export')){
				this.$message.error("您暂无<导出系统日志信息>权限")
				return
			}
      this.request('/api/log/export').then(res=>{
        if(!res){return}
        const file = new Blob([res.data], { type: "application/vnd.ms-excel" });
        const url = URL.createObjectURL(file);
        const a = document.createElement("a");
        a.href = url;
        a.click();
        this.isClick = true;
        this.$message.success("导出成功")
      })
    },
    //获取全部角色
    getAllRole(){
        //let params=;
      this.request('/api/role/getAllRole').then(res=>{
        if(!res){return}
        if(this.sa.isNotNull(res.data)){
          this.roleOptions=res.data
        }
      })
    },
		//修改/新增用户角色id，在下拉框被重新选中后就会执行
    //可能会有点问题，但仔细理了下不修改直接关闭，不触发全局事件总线，父组件的数据不受影响，再次点击修改数据也会重新加载，上一次未提交的操作也影响不到
    setUserRole(params){
      this.query.userType=params
    },
		//对话框取消
		handleClose(done) {
			done();
		}
	},
	mounted(){
		this.f5()
	}
}
</script>

<style scoped>
/**模糊查询字体样式 */
/deep/.c-panel .el-form-item__label, .c-panel .c-label {
	font-size:14px;
	font-weight:900
}

/*表格样式 */
/deep/ .el-table th.el-table__cell {
  background-color: aliceblue;
}
/*模糊搜索表单右移5px，对齐全局按钮和数据table*/
/deep/.c-panel .el-form{
	margin-left:-15px
}
/*按钮与表格的对齐间距等等 */
.firstBtn{
  padding-right:5px;
  margin-bottom: 5px;
}
.btn{
  padding-right:5px;
  margin-bottom: 5px;
}
/*分页左移10px */

</style>